<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="/plugins/iview/css/iview.css">
    <style>
        td.ivu-table-expanded-cell {
            padding: 1px 0px 1px 5px;
            background: #f8f8f9;
        }
    </style>
</head>
<body>

<div id="app">

    <!--<edit ref="edittem" @edit="edited"></edit>-->
    <edit ref="edittem"></edit>
    <itable :columns="columns" @itabeupdate="update" v-on="$listeners" :data="tableData"></itable>

</div>

<script src="/plugins/vue/vue.min.js"></script>
<script src="/plugins/iview/js/iview.min.js"></script>
<script src="/plugins/vue/httpVueLoader.js"></script>
<script src="/plugins/vue/axios.min.js"></script>
<script src="/app/js/i-axios.js"></script>
<script src="/app/js/utils.js"></script>

<script type="text/javascript">
    Vue.component('itable',httpVueLoader('itabe.vue'))
    Vue.component('itable-body',httpVueLoader('itabe-body.vue'))
    var vm = new Vue({
        el: '#app',
        components: {
            'edit': httpVueLoader('edit.vue'),
        },
        data:{
            columns: [
                {
                    title: '序号',
                    type: 'index',
                    width:40,
                    align: 'center'
                },
                {
                    title: '名称',
                    key: 'name',
                    // width:150,
                    align: 'center'
                },
                {
                    title: '简介',
                    key: 'description',
                    // width:150,
                    align: 'center'
                },
                {
                    title: '图标',
                    key: 'ico',
                    align: 'center',
                    render: (h, params) => {
                        return h('img', {
                            attrs:{
                                'src':params.row.ico,
                            },
                            style: {
                                width: '80px',
                                height:'60px'
                            }
                        }, '');
                    }
                },
                {
                    title: '顺序',
                    key: 'sort',
                    align: 'center'
                },
            ],
            tableData:[],
            editIndex:undefined,
            loading:false,
            openIds:[],
            editData:undefined,
        },
        mounted() {
            this.load();
        },
        methods:{
            load() {
                let _this = this;
                _this.loading=true;
                iget('/admin/category/tree',
                    '',
                    successRes => {
                        _this.tableData=successRes
                        _this.loading=false;
                    },failureRes => {
                        console.info("加载数据异常",failureRes)
                    }
                )
            },
            update(data){
                console.info("index update",data)
                data.name=data.name+"1"
                // this.editData = data;
                // this.editData.name=this.editData.name+"33"
                this.$refs.edittem.edit(data);
            },
        }
    });
</script>

</body>
</html>